import React, { FC } from 'react';
import { Button } from '@mui/material';
import './index.less';

export interface IFilter {
  label: string;
  items: readonly string[];
}

interface FilterProps {
  data: IFilter[];
}

export const Filter: FC<FilterProps> = ({ data }) => {

  return (
    <ul className='filter'>
      {
        data.map(({ label, items }) =>
          <li key={ label } className='filter-refer'>
            <span className='filter-refer-label'>{ label }</span>
            <ul className='filter-refer-items'>
              {
                items.map(item =>
                  <li key={ item } className='filter-refer-item'>
                    <Button
                      className='tag-button'
                      size='small'
                    >
                      { item }
                    </Button>
                  </li>
                )
              }
            </ul>
          </li>
        )
      }
    </ul>
  );
};
